import React from "react";
import ReactDOM from "react-dom/client";

/**
 * ref
 *    回想在 vue 中 ref 的作用
 *        1. 给元素或组件添加一个标识，然后通过 this.$refs.xx 标识获取到：
 *              普通html元素 - dom对象
 *              组件 - 这个组件的实例对象
 *        2. vue3 中 ref() 响应式API
 *
 *    React 中 ref 的作用
 *        给元素或组件添加一个标识，然后通过 this.$refs.xx 标识获取到：
 *              普通html元素 - dom对象
 *              组件 - 这个组件的实例对象
 *
 *    React 中 ref 的使用
 *
 *      1. 字符串方式
 *      2. 函数的方式
 *      3. React.createRef() api 的方式
 *
 */

class Hello extends React.Component {
  state = {
    name: "张三",
  };
  render() {
    return <div>Hello - {this.state.name}</div>;
  }
}

/**
 * 函数的方式
 *    1. 实例的 refs 就不能收集的内容，是个空对象
 */
class App extends React.Component {
  handleClick = () => {
    // 观察一下 refs
    // console.log(this.refs);
    // 这个位置如何拿到 input 元素中的 DOM 对象，也就是下方的 el ?
    //    1. 放到 state 身上存着  不推荐
    //    2. 直接放到 当前组件的 实例对象上  推荐
    console.log("handleClick", this.inputRef.value);
  };

  render() {
    return (
      <div>
        <h1>App</h1>
        {/* 
            这个函数会被react执行。并且会传递一个参数给这个函数，这个参数的值有两种情况
                1. 写在普通元素上，值就是 DOM 对象
                2. 写在组件上，值就是 组件的实例对象
        */}
        <input
          ref={(el) => {
            console.log("input 元素", el);
            this.inputRef = el;
          }}
          type="text"
          placeholder="请输入内容"
        />

        <Hello
          ref={(el) => {
            console.log("Hello 组件", el);
            this.helloRef = el;
          }}
        />

        <button onClick={this.handleClick}>点击我获取上面输入框的内容</button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
